{extend name="public:layout" /}
{block name="title"}添加角色{/block}
{block name="head"}{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index',['utype'=>$Request.param.utype])}">
                    角色列表</a></li>
                <li class="active">添加角色</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal" id="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">角色编码</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="group_id" value="" datatype="*"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">角色名称</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="title" value="" datatype="*"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">角色描述</label>
                    <div class="col-sm-8">
                        <textarea name="description" class="form-control"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">权限规则</label>
                    <div class="col-sm-10">
                        <table class="table">
                            <tr>
                                <th>权限名称</th>
                                <th>操作按钮</th>
                            </tr>
                            {volist name="authRule" id="vo"}
                            <tr id="{$vo.rule_id}" pId="{$vo.rule_pid}">
                                <td>
                                    <label class="check-inline i-checks">
                                        <input type="checkbox" class="menu-checkbox" name="rule[{$vo.rule_id}][rule_id]" value="{$vo.rule_id}" />
                                    {$vo.title}
                                    </label>
                                </td>
                                <td>
                                    {notempty name="vo.rule_button"}
                                    <?php $ruleButtons = explode(',',$vo['rule_button']); ?>
                                    {foreach $ruleButtons as $value}
                                    <?php $m=explode('|',$value); ?>
                                    <label class="check-inline i-checks">
                                        <input type="checkbox" class="btn-checkbox" name="rule[{$vo.rule_id}][btn][]" value="{$m[0]}|{$m[1]}" /> {$m[1]}
                                    </label>
                                    {/foreach}
                                    {/notempty}
                                </td>
                            </tr>
                            {/volist}
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">状态</label>
                    <div class="col-sm-4">
                        <label class="radio-inline i-checks">
                            <input type="radio" name="status" value="1" checked/> 启用
                        </label>
                        <label class="radio-inline i-checks">
                            <input type="radio" name="status" value="0"/> 禁用
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">排序</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" name="group_sort" value="0"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-primary" id="btnSub" type="button">
                            保存内容
                        </button>
                        <a href="{:url('index',['utype'=>$Request.param.utype])}" class="btn btn-white">取消</a>
                        <span id="validError"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        iCheck();
        In('treetable',function(){
            var option = {
                theme: 'default',
                expandLevel: 1,
                column: 0,
                onSelect: function ($treeTable, id) {
                    console.log('onSelect:' + id);
                }
            };
            $('.table').treeTable(option);
        })
        $(".menu-checkbox").on('ifClicked', function(event){
            if(event.target.checked==true){ //执行点击事件，这里获取的是点击之前的状态，做相反处理
                var checked=0;
                $(this).closest('tr').find('.btn-checkbox').iCheck('uncheck');
            }else{
                var checked=1;
                $(this).closest('tr').find('.btn-checkbox').iCheck('check');
            }
            var value = event.currentTarget.value;
            var url = "{:url('getUpDown')}";
            var utype = "{$Request.param.utype}";
            event.preventDefault(); //阻止时间冒泡
            getAjax(url,{checked:checked,value:value,utype:utype},function (res) {
                $(".table tr").each(function(i, v){
                    var that=this;
                    var id=parseInt($(that).attr('id'));
                    if(res.checked==1){ //选中状态
                        //级联选中上级
                        if(res.up.length>1){
                            if($.inArray(id,res.up)>-1){
                                $(that).find('.menu-checkbox').iCheck('check');
                            }
                        }
                        //级联选中下级
                        if(res.down.length>1){
                            if($.inArray(id,res.down)>-1){
                                $(that).find('.menu-checkbox').iCheck('check');
                                $(that).closest('tr').find('.btn-checkbox').iCheck('check');
                            }
                        }
                    }else{ //取消选择
                        //级联取消下级选择
                        if(res.down.length>1){
                            if($.inArray(id,res.down)>-1){
                                $(that).find('.menu-checkbox').iCheck('uncheck');
                                $(that).closest('tr').find('.btn-checkbox').iCheck('uncheck');
                            }
                        }
                    }
                });
            });
        });
        ajaxSubForm('#btnSub');
    });
</script>
{/block}